'use strict';

// 一、基础题
// 1. 已知一个三角形的底为10，高为5，请尝试声明底和高两个变量，并求出这个三角形的面积，在控制台进行打印。
//  提示：三角形的面积=(底*高)/2


var x = 10;

var y = 5;

var area = (x*y) / 2;

console.log(area);


// 2. 请编写一个程序，可以求出1到100之间所有偶数的和，并在控制台打印。

var num = 100;
var sum =0;
for(var i = 0;i<=num;i++){
    if(i%2==0){
        sum+=i;
        //console.log(i);
    }
}
console.log('1到100之间所有偶数的和'+sum);



// // 3. 请使用相关数学函数在1 ~ 10000随机取一个数，并在控制台打印。

console.log(Math.random()*10000);




// 4. 请声明一个函数，传入参数为绩效分数score，根据如下规则进行判断并返回相关字符串：
//  90~100：返回 考核等级S，奖励3倍工资
//  80~89：返回 考核等级A，奖励2倍工资
//  70~79：返回 考核等级B，奖励1倍工资
//  60~69：返回 等级C，不奖励，需要继续努力
//  0~59：返回 考核等级D，考核较差，需要再观察或者劝退;

function getscore(score){
    if(0<=score<=59){
        console.log(' 考核等级D，考核较差，需要再观察或者劝退');
        if(60<=score<=69){
            console.log('等级C，不奖励，需要继续努力');
            if(70<=score<=79){
                console.log('考核等级B,奖励1倍工资');
    
            }
        }
        else if(80<=score<=89){
            console.log('考核等级A,奖励2倍工资');
        }
    }else{
        console.log('考核等级S,奖励3倍工资');
    }
}







// 5. 请声明一个函数，传入参数为正整数n，函数内计算n!，并返回结果。
//  提示：请注意对参数进行校验。
//  提示：n! = 1 * 2 * 3 * ... * n
function myfunction(n){
    if(n<2){
       return 1;
    }else{

            return n * myfunction(n-1);
        }

    }
console.log(myfunction(10));






// 6. 请声明一个函数，传入参数为字符串str，在函数内移除str首尾空格，然后计算长度，并返回长度

function trim(str){
    return str.replace(/(^\s*)/g,"");
}

console.log(trim.length);//1


// // 7. 请声明一个匿名函数，传入参数为数组arr，在函数内对数组进行求和，并返回和。
// //  调用这个函数，传入数组参数：[10,30,50,22]，打印函数返回结果

/*var a = function(arr){
    var sum = 0;
    for(var i= 0;i<arr.length;){
        sum+=i;
        i++;
    }
    return sum;
}
console.log(a[10,30,50,22]);*/

var a = function(){
    var arr = [10,30,50,22];

    var sum = 0;

    for(var i=0,len = arr.length;i < len;i++){
        sum+=arr[i];
    }
    console.log(sum);

}
a();





// 8. 已知一个数组为：[ 1, 4, 3, 2 ]，
//  请使用数组相关的方法检测元素 3 在数组中是否存在，
//  存在则在控制打印出相应的下标，否则打印不存在。
let arr = [1,4,3,2];
var k = 3;
var c = [];
//console.log(typeof 3);

if(typeof 3 =='number'){
    console.log('存在');
}

for(var i=0;i<arr.length;i++){
    if(k == arr[i]){
        c.push(i)
    }
}
console.log(c);







// 9. 已知一个用户对象为：{id: 1, name: "庄周", desc: "辅助"}，
//  请尝试声明一个变量表示上面这个对象，
//  然后给这个对象增加一个性别属性，属性名称为：sex，属性值为：男。
//  最后在控制台打印这个对象。

var person = {
    id:1,
    name:"庄周",
    desc:"辅助"
}

person.sex = '男'

console.log(person);





// 10. 声明一个学生类，包含：姓名（name）、性别（gender）、生日字段（birthday）
//  实例化一个学生对象，学生相关属性为：
//      姓名：鬼谷子
//      性别：男
//      生日：2002-07-28
//  实例化完成之后，在控制台打印这个对象。

var student = new Object();
student.name = '鬼谷子';
student.gender = '男';
student.birthday = '2020-07-28'



console.log(student);

 //一.请利用构造函数定义Cat，并让所有的Cat对象有一个name属性，并共享一个方法say()，返回字符串'Hello, xxx!'：
 function Cat(name){
     this.name = name;
 }
 Cat.prototype.say = function(){
     return`Hello,${this.name}!`
 }
 
 // 测试:
 /*var kitty = new Cat('Kitty');
 var doraemon = new Cat('哆啦A梦');
 if (kitty && kitty.name === 'Kitty'
     && kitty.say
     && typeof kitty.say === 'function'
     && kitty.say() === 'Hello, Kitty!'
     && kitty.say === doraemon.say
 ) {
     console.log('测试通过!');
 } else {
     console.log('测试失败!');
 }*/
 //二.按字符串顺序重新排序DOM节点：
 var list =document.getElementById('test-list')
 var slist = list.children;
 console.log(slist);
 slist = Array.prototype.slice.call(slist).sort(function(a,b){
            return a.innerHTML > b.innerHTML ? 1 : -1;
 })
 slist.forEach(function(el){
     list.appendChild(el);
 })
 /*
// 测试:
(function () {
var
 arr, i,
 t = document.getElementById('test-list');
if (t && t.children && t.children.length === 6) {
 arr = [];
 for (i=0; i<t.children.length; i++) {
     arr.push(t.children[i].innerText);
 }
 if (arr.toString() ===  ['ANSIC', 'CSS', 'DirectX','HTML','JavaScript','Swift'].toString()) {
     console.log('测试通过!');
 }
 else {
     console.log('测试失败: ' + arr.toString());
 }
}
else {
 console.log('测试失败!');
}
})();*/
  /* <!-- 第三题大题 --> */
 // 选择<p>JavaScript</p>:
var t = document.getElementById("test-p");
console.log(t);
  // 选择<p>Python</p>,<p>Ruby</p>,<p>Swift</p>:
var t1 = document.getElementsByClassName("c-red")[1].getElementsByTagName("p");

console.log(t1);
   // 选择<p>Haskell</p>:
var t2 = document.getElementsByClassName("c-green")[1].lastElementChild;

console.log(t2);
 // 测试:
 /*if (!js || js.innerText !== 'JavaScript') {
    alert('选择JavaScript失败!');
} else if (!arr || arr.length !== 3 || !arr[0] || !arr[1] || !arr[2] || arr[0].innerText !== 'Python' || arr[1].innerText !== 'Ruby' || arr[2].innerText !== 'Swift') {
    console.log('选择Python,Ruby,Swift失败!');
} else if (!haskell || haskell.innerText !== 'Haskell') {
    console.log('选择Haskell失败!');
} else {
    console.log('测试通过!');
}*/


 /* <!-- 第四题大题 --> */
 // 使用jQuery选择器分别选出指定元素：
 //+ 仅选择JavaScript
var javascript = $('#para-1');
console.log(javascript);
 //+ 仅选择Erlang
 var erlang = $('.color-red.color-green')
 console.log(erlang);
 //+ 选择JavaScript和Erlang
 var je = $('#para-1,.color-red.color-green');
 console.log(je);
 //+ 选择所有编程语言
 var all = $('p[class^=color-]');
 console.log(all);
 //+ 选择名字input
 var nameinput = $('p input[name=name]');
 console.log(nameinput);
 //+ 选择邮件和名字input 
 var pn = $('p input[name=name],input[name=email]');
 console.log(pn);
 //高亮结果:
 //if(!(all instanceof jQuery)){
   // console.log('不是有效的jQuery对象');
 //}
 //$('#test-jquert').find('*').css('background-color','#ff0000').css('color','red');
 //all.css('background-color','#ff0000')


 /* <!-- 第五题大题 --> */
 // 输入值后，用jQuery获取表单的JSON字符串，key和value分别对应每个输入的name和相应的value，例如：`{"name":"Michael","email":...}`

 var input =$('input[name="name"]')

 input.val("joker")

 var email = $('input[name="email"]')

 email.val("cjw.163.com");

 var password = $('input[name=password]')

 password.val(123456)

 var gender = $('input[type=radio]:checked')

 gender.val("Female")

 var city = $('input [name="city"].checked')

 city.val('SH');
/*var input = {};

input.name  = $('input[name="name"]').val();

console.log(input.name);

input.email = $('input[email="email"]').val();

input.password =$('input[name="password"]').val();

input.gender = $('input[type=radio]:checked').parent().text();

input.city = $('option:checked').text();*/





 /* <!-- 第六题大题 --> */
 //除了列出的3种语言外，请再添加Pascal、Lua和Ruby，然后按字母顺序排序节点：
 var ul = $('#test-div>ul')

 ul.append('<li><span>Pascal</span></li>')

 ul.append('<li><span>Lua</span></li>')

 ul.append('<li><span>Ruby</span></li>')

 function sortList() {
    var list=document.getElementById("#test-div");
    var switching=true;
    //做一个循环
    while (switching){
        //不切换
        switching=false;
        var b=list.getElementsByTagName("li");
        //遍历所有的列表
        for(var i=0;i<(b.length-1);i++){
            switching=false;
            //检查下一项是否应该和当前项换位置
            if (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) {
                switching=true;
                break;
            }
        }
        //位置互换
        if(switching){
            b[i].parentNode.insertBefore(b[i+1],b[i]);
            switching=true;
        }
    }
}

 /* <!-- 第七题大题 --> */
 /* 
 + 绑定合适的事件处理函数，实现以下逻辑：
 + 当用户勾上“全选”时，自动选中所有语言，并把“全选”变成“全不选”；
 + 当用户去掉“全不选”时，自动不选中所有语言；
 + 当用户点击“反选”时，自动把所有语言状态反转（选中的变为未选，未选的变为选中）；
 + 当用户把所有语言都手动勾上时，“全选”被自动勾上，并变为“全不选”；
 + 当用户手动去掉选中至少一种语言时，“全不选”自动被去掉选中，并变为“全选”。
  */

/*$(function(){
  var
    form = $('#test-form'),
    langs = form.find('[name=lang]'),
    selectAll = form.find('label.selectAll :checkbox'),
    selectAllLabel = form.find('label.selectAll span.selectAll'),
    deselectAllLabel = form.find('label.selectAll span.deselectAll'),
    invertSelect = form.find('a.invertSelect');
 
// 重置初始化状态:
form.find('*').show().off();
form.find(':checkbox').prop('checked', false).off();
deselectAllLabel.hide();
// 拦截form提交事件:
form.off().submit(function (e) {
    e.preventDefault();
    alert(form.serialize());
});
   
   selectAll.change(function(){
    if(this.checked){
      langs.prop('checked',true);
      deselectAllLabel.show();
      selectAllLabel.hide();
    }else{
      langs.prop('checked',false);
      deselectAllLabel.hide();
      selectAllLabel.show();
    }
   })
 
   invertSelect.click(function(){
    langs.each(function(){
      if(this.checked){
        $(this).prop('checked',false);
      }else{
        this.checked = true;
      }
    })
   })
 
   //alert(langs.length);
   var count = 0,
       len = langs.length;
   langs.click(function(){
    count = 0;
    langs.each(function(){
      if(this.checked)
        count++;
    })
    if(count == len){
      selectAll.prop('checked',true);
      deselectAllLabel.show();
      selectAllLabel.hide();
    }else{
        selectAllLabel.show();
        deselectAllLabel.hide();
        selectAll.prop('checked',false);
    }
   })
})*/

// 测试:
//console.log('请测试功能是否正常。');*/

/*function clickon(){
    var checkbox = document.querySelectorAll("input[type='checkbox']");

    for (var i =0;i < checkbox.length;i++){
        checkbox[i].checked = true;
    }
}
function unclick(){
    var checkbox1 = document.querySelectorAll("input[type='checkbox']");

    for(var i =0;i < checkbox1.length;i++){
        checkbox1[i].checked = false;
    }
}

function reserve(){
    var checkbox3 = document.querySelectorAll("input[type='checkbox']");

    for(var i =0;i<checkbox3.length;i++){
        checkbox3[i].checked  = !checkbox3[i].checked;
    }
}*/
var
    form = $('#test-form'),
    langs = form.find('[name=lang]'),
    selectAll = form.find('label.selectAll :checkbox'),
    selectAllLabel = form.find('label.selectAll span.selectAll'),
    deselectAllLabel = form.find('label.selectAll span.deselectAll'),
    invertSelect = form.find('a.invertSelect');

// 重置初始化状态:
form.find('*').show().off();
form.find(':checkbox').prop('checked', false).off();
deselectAllLabel.hide();
// 拦截form提交事件:
form.off().submit(function (e) {
    e.preventDefault();
    alert(form.serialize());
});

//以下是重点：
selectAllLabel.click(function(){//当用户勾上“全选”时，自动选中所有语言，并把“全选”变成“全不选”；
    langs.prop('checked',true);
    selectAllLabel.hide();
    deselectAllLabel.show();
});

deselectAllLabel.click(function(){//当用户去掉“全不选”时，自动不选中所有语言；
    langs.prop('checked',false);
    deselectAllLabel.hide();
    selectAllLabel.show();
});

invertSelect.click(function(){//当用户点击“反选”时，自动把所有语言状态反转（选中的变为未选，未选的变为选中）；
    langs.map(function(){
       $(this).prop('checked',!$(this).prop('checked'));
    });
});

langs.map(function(){
   $(this).change(function(){//当用户把所有语言都手动勾上时，“全选”被自动勾上，并变为“全不选”；
        if($('[name=lang]:checked').length==5){
            selectAll.prop('checked',true);
            selectAllLabel.hide();
            deselectAllLabel.show();
        }else{//当用户手动去掉选中至少一种语言时，“全不选”自动被去掉选中，并变为“全选”。
            selectAll.prop('checked',false);
            selectAllLabel.show();
            deselectAllLabel.hide();
        }
    });
});




